<script>
  const positions = []

  for (let i = 0; i < 100; i++) {
    const x = MathUtils.randFloatSpread(20000)
    const y = MathUtils.randFloatSpread(2000)
    const z = MathUtils.randFloatSpread(20000)

    positions.push(x, y, z)
  }
  const geometry = new BufferGeometry()
  geometry.setAttribute("position", new Float32BufferAttribute(positions, 3))

  const material = new MeshStandardMaterial({ color: 0x888888 })

  //   const triangles = 60000
  //   const positions = []
  //   const normals = []
  //   const colors = []

  //   const color_a = new Color()

  //   const n = 800,
  //     n2 = n / 2 // triangles spread in the cube
  //   const d = 12,
  //     d2 = d / 2 // individual triangle size

  //   const pA = new Vector3()
  //   const pB = new Vector3()
  //   const pC = new Vector3()

  //   const cb = new Vector3()
  //   const ab = new Vector3()

  //   for (let i = 0; i < triangles; i++) {
  //     // positions

  //     const x = Math.random() * n - n2
  //     const y = Math.random() * n - n2
  //     const z = Math.random() * n - n2

  //     const ax = x + Math.random() * d - d2
  //     const ay = y + Math.random() * d - d2
  //     const az = z + Math.random() * d - d2

  //     const bx = x + Math.random() * d - d2
  //     const by = y + Math.random() * d - d2
  //     const bz = z + Math.random() * d - d2

  //     const cx = x + Math.random() * d - d2
  //     const cy = y + Math.random() * d - d2
  //     const cz = z + Math.random() * d - d2

  //     positions.push(ax, ay, az)
  //     positions.push(bx, by, bz)
  //     positions.push(cx, cy, cz)

  //     // flat face normals

  //     pA.set(ax, ay, az)
  //     pB.set(bx, by, bz)
  //     pC.set(cx, cy, cz)

  //     cb.subVectors(pC, pB)
  //     ab.subVectors(pA, pB)
  //     cb.cross(ab)

  //     cb.normalize()

  //     const nx = cb.x
  //     const ny = cb.y
  //     const nz = cb.z

  //     normals.push(nx, ny, nz)
  //     normals.push(nx, ny, nz)
  //     normals.push(nx, ny, nz)

  //     // colors

  //     const vx = x / n + 0.5
  //     const vy = y / n + 0.5
  //     const vz = z / n + 0.5

  //     color_a.setRGB(vx, vy, vz)

  //     const alpha = Math.random()

  //     colors.push(color_a.r, color_a.g, color_a.b, alpha)
  //     colors.push(color_a.r, color_a.g, color_a.b, alpha)
  //     colors.push(color_a.r, color_a.g, color_a.b, alpha)
  //   }
  import { Canvas, InstancedMesh, Instance } from "@threlte/core"
  import {
    BufferGeometry,
    Vector3,
    PointsMaterial,
    Color,
    MathUtils,
    Float32BufferAttribute,
    MeshStandardMaterial,
  } from "three"
</script>

<Canvas>
  <InstancedMesh {geometry} {material} interactive>
    <!-- {#each positions as position}
      <Sphere {position} />
    {/each} -->
    <!-- <Instance position={{ x: 1 }} scale={1} /> -->
    <Instance position={{ y: -1 }} scale={1} color="green" />
    <Instance position={{ z: 2 }} scale={2} color="red" />
  </InstancedMesh>
</Canvas>
